// 功能一：移动
function move(element, target) {
    flag = true;
    let loop;
    if (loop) {
        clearInterval(loop)
    }
    loop = setInterval(function () {
        let current = element.offsetLeft;
        let step = 10;
        step = target > current ? step : - step;
        current += step;
        console.log("current:" + current + "----target:" + target + "---step:" + step + "----offsetLeft:" + element.offsetLeft);
        if (Math.abs(target - current) <= Math.abs(step)) {
            clearInterval(loop)
            element.style.left = target + "px";
            flag = false;
            return true;
        } else {
            element.style.left = current + "px";
        }
    }, 20);
}

let flag = false;
let core = document.getElementById("core");
let move1 = document.getElementById("move1");
let move2 = document.getElementById("move2");
let move3 = document.getElementById("move3");
move1.addEventListener("click", function () {
    if (!flag) {
        move(core, 400);
    }
}, false);
move2.addEventListener("click", function () {
    if (!flag) {
        move(core, 800);
    }
}, false);
move3.addEventListener("click", function () {
    if (!flag) {
        move(core, 0);
    }
}, false);

// 功能二：动画，单一属性
function getStyle(element, prop) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[prop] : element.currentStyle[prop];
}
function animate(element, prop, target, fn) {
    clearInterval(element.timerId)
    element.timerId = setInterval(function () {
        if (prop == "opacity") {
            let current = getStyle(element, prop);
            let step = (target * 100 - current * 100) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current = (current * 100 + step) / 100
            element.style[prop] = current
            if (current == target) {
                clearInterval(element.timerId);
                if (fn) {
                    fn();
                }
            }
            console.log("current:" + current + "---step:" + step + "---target:" + target);
        } else {
            let current = parseInt(getStyle(element, prop));
            let step = (target - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            current += step;
            element.style[prop] = current + "px";
            if (current == target) {
                clearInterval(element.timerId);
                if (fn) {
                    fn();
                }
            }
            console.log("current:" + current + "---step:" + step + "---target:" + target);
        }
    }, 20)
}
let core1 = document.getElementById("core1");
let animate1 = document.getElementById("animate1");
let animate2 = document.getElementById("animate2");
let animate3 = document.getElementById("animate3");
let animate4 = document.getElementById("animate4");
let animate5 = document.getElementById("animate5");
animate1.addEventListener("click", function () {
    animate(core1, "width", 400);
}, false);
animate2.addEventListener("click", function () {
    animate(core1, "height", 300);
}, false);
animate3.addEventListener("click", function () {
    animate(core1, "left", 800);
}, false);
animate4.addEventListener("click", function () {
    animate(core1, "opacity", 0.1);
})
animate5.addEventListener("click", function () {
    animate(core1, "left", 0, function () {
        animate(core1, "width", 150, function () {
            animate(core1, "height", 150, function () {
                animate(core1, "opacity", 1);
            });
        });
    });
}, false);

// 功能三：动画，多个属性
function animation(element, json, fn) {
    clearInterval(element.timerId);
    element.timerId = setInterval(function () {
        let bool = true;
        for (const attr in json) {
            if (attr == "opacity") {
                let current = getStyle(element, attr) * 100;
                let target = json[attr] * 100;
                let step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current / 100;
                if (current != target) {
                    bool = false;
                }
            } else if (attr == "zIndex") {
                element.style[attr] = json[attr];
            } else if (attr == "backgroundColor") {
                element.style[attr] = json[attr];
                element.style.transition = "background-color 1.5s ease";
            } else {
                let current = parseInt(getStyle(element, attr));
                let target = parseInt(json[attr]);
                let step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current += step;
                element.style[attr] = current + "px";
                console.log("current:" + current + "---step:" + step + "---target:" + target);
                if (current != target) {
                    bool = false;
                }
            }
        }
        if (bool) {
            clearInterval(element.timerId);
            if (fn) {
                fn();
            }
        }
    }, 20);
}
let core2 = document.getElementById("core2");
let animation1 = document.getElementById("animation1");
let animation2 = document.getElementById("animation2");
let animation3 = document.getElementById("animation3");
let animation4 = document.getElementById("animation4");
let animationx = document.getElementById("animationx");
animation1.addEventListener("click", function () {
    animation(core2, { "width": "400px", "height": "300px", "left": "800px" });
}, false)
animation2.addEventListener("click", function () {
    animation(core2, { "opacity": 0.1 });
}, false)
animation3.addEventListener("click", function () {
    animation(core2, { "zIndex": 99, "width": 80, "height": 80, "top": -20, "left": 20 });
}, false)
animation4.addEventListener("click", function () {
    animation(core2, { "backgroundColor":"yellowgreen" });
}, false)
animationx.addEventListener("click", function () {
    animation(core2, { "width": 150, "height": 150, "left": "0" }, function () {
        animation(core2, { "opacity": 1 }, function () {
            animation(core2, { "zIndex": 0, "left": 0, "top": 0 },function () {
                animation(core2,{"backgroundColor":"darkorange"});
            })
        });
    });
    // core2.style = "" 
}, false)